<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商品管理页</title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<style>
			.layui-table-cell {
				height: 60px;
				line-height: 60px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<blockquote class="layui-elem-quote news_search">
				<div class="layui-inline">
					<a class="layui-btn layui-btn-normal" onclick="commodityObj.add()">新增商品</a>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label" style="margin-bottom: 0; width: 105px">关键词：</label>
					<div class="layui-input-inline">
						<input id="commodity_keyword_input" value="" placeholder="请输入关键字" class="layui-input search_input" type="text">
					</div>
					<a class="layui-btn search_btn" onclick="commodityObj.query()">查询</a>
				</div>
			</blockquote>
			<!--  商品列表表格 -->
			<table class="layui-table" lay-filter="commodity_table" id="commodity_table" style="margin: 0"></table>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script>
			layui.use('table', function() {
				var table = layui.table;
				// 加载商品数据表格
				window.commodityTable = table.render({
					id: 'commodityTable',
					elem: '#commodity_table',
					url: commonUtil.domain() +'/admin/mall/commodity/list', //数据接口
					method: 'post',
					page: true, //开启分页
					request: {
						pageName: 'pageNum', // 分页当前页数发给后台的参数名
						limitName: 'pageSize' // 分页每页多少条发给后台的参数名
					},
					done: function(res) {
						$('.layui-laypage-count').text('共' + res.total + '条')
					},
					cols: [
						[ //表头
							{
								title: '图片1',
								width: 100,
								templet: "#imgView",
								width: 80
							}, {
								title: '图片2',
								width: 100,
								templet: "#commodityBigImg",
								width: 80
							}, {
								title: '图片3',
								width: 100,
								templet: "#detailImgPath",
								width: 80
							}, {
								field: 'commodityName',
								title: '商品名称',
								width: 100
							}, {
								field: 'categoryName',
								title: '商品类别',
								width: 190
							}, {
								field: 'price',
								title: '价格(元)',
								width: 90
							}, {
								field: 'unit',
								title: '商品规格',
								width: 90
							}, {
								field: 'count',
								title: '商品库存',
								width: 90
							}, {
								field: 'commodityCode',
								title: '商品代码',
								width: 90
							}, {
								field: 'commodityNote',
								title: '商品描述',
								width: 90
							}, {
								field: 'sortCode',
								title: '排序码',
								width: 80
							}, {
								field: 'recommend',
								title: '推荐',
								width: 70,
								templet: "#recommend"
							}, {
								field: 'hot',
								title: '热卖',
								width: 70,
								templet: "#hot"
							}, {
								field: 'status',
								title: '状态',
								width: 70,
								templet: "#status"
							}, {
								field: 'oper',
								title: '操作',
								width: 290,
								templet: '#oper'
							}
						]
					]
				});

				// 监听表格点击删除修改和查看图片列表按钮
				table.on('tool(commodity_table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; // 获得当前行数据
					var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; // 获得当前行 tr 的DOM对象
					if(layEvent === 'imgList') {
						// 打开添加商品的窗口
						layer.open({
							type: 2,
							title: '图片列表',
							shadeClose: true,
							shade: 0.8,
							maxmin: false, // 开启最大化最小化按钮
							area: ['650px', '485px'],
							content: 'commodityImg.html?commodityId=' + data.commodityId
						});
					} else if(layEvent === 'delete') { // 点击表格一行的移除按钮
						layer.confirm("确定要删除此商品吗？", function(index) {
							// 发送ajax请求 删除地区
							var ajaxParam = {
								url: commonUtil.domain() +"/admin/mall/commodity/delete",
								data: {
									commodityId: data.commodityId
								}
							}
							ajaxUtil.post(ajaxParam, function() {
								layer.closeAll();
								commodityTable.refresh();
							});
						});
					} else if(layEvent === 'update') {
						// 打开添加用户的窗口
						layer.open({
							type: 2,
							title: '修改',
							shadeClose: true,
							shade: 0.8,
							maxmin: false, // 开启最大化最小化按钮
							area: ['650px', '485px'],
							content: 'commodity_form.html?commodityId=' + data.commodityId
						});
					}
				});
				// 刷新表格
				commodityTable.refresh = function(data) {
					commodityTable.reload({
						where: data,
						page: {
							curr: 1 //重新从第 1 页开始
						}
					});
				}
			});
			// 用户增删改查对应的对象
			var commodityObj = {
				add: function() {
					// 打开添加用户的窗口
					layer.open({
						type: 2,
						title: '添加',
						shadeClose: true,
						shade: 0.8,
						maxmin: false, // 开启最大化最小化按钮
						area: ['750px', '695px'],
						content: 'commodity_form.html'
					});
				},
				query: function() {
					var keyword = $('#commodity_keyword_input').val();
					var data = {
						keyword: keyword
					}
					commodityTable.refresh(data);
				}
			}
		</script>
		<script>
			$(function(){
				commonUtil.setMaxLength(40);
			})
		</script>
		<script type="text/html" id="imgView">
			<img width="60" height="60" src="{{ commonUtil.hostName() + d.imgViewPath }}" alt="无图" />
		</script>

		<script type="text/html" id="detailImgPath">
			<img width="60" height="60" src="{{ commonUtil.hostName() + d.detailImgPath }}" alt="无图" />
		</script>
		<script type="text/html" id="commodityBigImg">
			<img width="60" height="60" src="{{ commonUtil.hostName() + d.commodityBigImg }}" alt="无图" />
		</script>

		<script type="text/html" id="oper">
			<a class="layui-btn layui-btn-xs" lay-event="imgList">查看图片</a>
			<a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
			<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
		</script>
		<script type="text/html" id="status">
			{{# if(d.status == 1){ }} 正常 {{# } else { }} 下架 {{# } }}
		</script>
		<script type="text/html" id="hot">
			{{# if(d.hot == 1){ }} 是 {{# } else { }} 否 {{# } }}
		</script>
		<script type="text/html" id="recommend">
			{{# if(d.recommend == 1){ }} 是 {{# } else { }} 否 {{# } }}
		</script>
	</body>

</html>